<!DOCTYPE html>
<html lang="en">

<head>
    <title>报警中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/alarmCenter.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_header">
            <div class="app_headerLeft" @click="back">
                <span class="iconfont icon-arrow-left-bold"></span>
            </div>
            <div class="app_headerTitle">报警中心</div>
            <div class="app_headerRight" @click="filterShow = true">
                <span class="iconfont icon-filter"></span>
            </div>
        </div>
        <div class="app_main">
            <div class="app_mainTabs">
                <div class="item">
                    <div class="itemNum">12</div>
                    <div class="itemTxt">今日报警</div>
                </div>
                <div class="item">
                    <div class="itemNum">2</div>
                    <div class="itemTxt">今日压力报警</div>
                </div>
                <div class="item">
                    <div class="itemNum">3</div>
                    <div class="itemTxt">今日流量报警</div>
                </div>
                <div class="item">
                    <div class="itemNum">21</div>
                    <div class="itemTxt">今日水质报警</div>
                </div>
            </div>
            <div class="app_mainItem" v-for="(item,index) in list">
                <div class="app_mainItemInfo1 str">
                    <div class="tips">{{item.tab}}</div>
                    <div class="title">{{item.title}}</div>
                </div>
                <div class="app_mainItemInfo2">{{item.time}}</div>
                <div class="app_mainItemInfo3 str">
                    <div class="tips">{{item.timeTips}}</div>
                    <div class="state" :style="item.state == 1?'color: #FF0000;':'color: #3BAB67;'">{{item.num}}MPa<span
                            class="iconfont icon-arrow-up"
                            :style="item.state == 1?'' : 'transform: rotate(180deg);'"></span>
                    </div>
                </div>
                <div class="app_mainItemBtn" @click="item.isBtn && submitBtn(item)"
                    :class="[item.isBtn == true?'attive':'']">{{item.isBtn == true?'确认':'已确认'}}</div>
            </div>
        </div>
        <nut-popup position="right" :style="{ height: '100vh', width: '100vw' }" v-model="filterShow">
            <div class="popupTitle">
                <div class="left" @click="filterShow = false"><span class="iconfont icon-close-bold"></span></div>
                <div class="title">筛选</div>
            </div>
            <div class="popupMain">
                <div class="popupMainTitle">报警状态</div>
                <div class="popupMainList">
                    <div :class="[alarmState == ''?'active':'']" @click="alarmState = ''">全部</div>
                    <div :class="[alarmState == 1?'active':'']" @click="alarmState = '1'">已确认</div>
                    <div :class="[alarmState == 2?'active':'']" @click="alarmState = '2'">待确认</div>
                </div>
                <div class="popupMainTitle">报警性质</div>
                <div class="popupMainList">
                    <div :class="[alarmNature == ''?'active':'']" @click="alarmNature = ''">全部</div>
                    <div :class="[alarmNature == 1?'active':'']" @click="alarmNature = '1'">普通报警</div>
                    <div :class="[alarmNature == 2?'active':'']" @click="alarmNature = '2'">严重报警</div>
                </div>
                <div class="popupMainTitle">报警类型</div>
                <div class="popupMainList">
                    <div :class="[alarmType == ''?'active':'']" @click="alarmType = ''">全部</div>
                    <div :class="[alarmType == 1?'active':'']" @click="alarmType = '1'">压力报警</div>
                    <div :class="[alarmType == 2?'active':'']" @click="alarmType = '2'">水质报警</div>
                    <div :class="[alarmType == 3?'active':'']" @click="alarmType = '3'">流量报警</div>
                    <div :class="[alarmType == 4?'active':'']" @click="alarmType = '4'">设备离线</div>
                </div>
            </div>
            <div class="popupBtn">
                <div @click="filterShow = false">取消</div>
                <div @click="saveBtn">确定</div>
            </div>
        </nut-popup>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                filterShow: false,
                alarmState: '',
                alarmNature: '',
                alarmType: '',
                list: [
                    { id: 1, time: '04-02 09:12', state: 1, isBtn: true, timeTips: '持续时间68分钟', num: '0.29', tab: '出水压力高限', title: '长沙天心区高新科技园1#' },
                    { id: 2, time: '04-02 09:12', state: 0, isBtn: false, timeTips: '持续时间68分钟', num: '0.29', tab: '出水压力高限', title: '长沙天心区高新科技园2#' },
                    { id: 3, time: '04-02 09:12', state: 1, isBtn: true, timeTips: '持续时间68分钟', num: '0.29', tab: '出水压力高限', title: '长沙天心区高新科技园3#' },
                    { id: 4, time: '04-02 09:12', state: 1, isBtn: true, timeTips: '持续时间68分钟', num: '0.29', tab: '出水压力高限', title: '长沙天心区高新科技园4#' },
                    { id: 5, time: '04-02 09:12', state: 0, isBtn: false, timeTips: '持续时间68分钟', num: '0.29', tab: '出水压力高限', title: '长沙天心区高新科技园5#' },
                    { id: 6, time: '04-02 09:12', state: 0, isBtn: false, timeTips: '持续时间68分钟', num: '0.29', tab: '出水压力高限', title: '长沙天心区高新科技园6#' },
                    { id: 7, time: '04-02 09:12', state: 0, isBtn: false, timeTips: '持续时间68分钟', num: '0.29', tab: '出水压力高限', title: '长沙天心区高新科技园7#' },
                    { id: 8, time: '04-02 09:12', state: 1, isBtn: true, timeTips: '持续时间68分钟', num: '0.29', tab: '出水压力高限', title: '长沙天心区高新科技园8#' },
                    { id: 9, time: '04-02 09:12', state: 0, isBtn: false, timeTips: '持续时间68分钟', num: '0.29', tab: '出水压力高限', title: '长沙天心区高新科技园9#' },
                    { id: 10, time: '04-02 09:12', state: 1, isBtn: true, timeTips: '持续时间68分钟', num: '0.29', tab: '出水压力高限', title: '长沙天心区高新科技园10#' },
                ]
            },
            mounted() { },
            methods: {
                back() {
                    window.history.go(-1);
                },
                saveBtn() {
                    console.log('当前选择的报警状态', this.alarmState)
                    console.log('当前选择的报警性质', this.alarmNature)
                    console.log('当前选择的报警类型', this.alarmType)
                },
                submitBtn(data) {
                    this.$toast.text('确认操作', {
                        icon: "https://img13.360buyimg.com/imagetools/jfs/t1/98294/28/14470/22072/5e65ba08E865683aa/ded7441bdd098511.png"
                    });
                    console.log('当前数据', data)
                }
            },
        })
    </script>
</body>

</html>